<template>
<div id="home">
    <div class="top">
        <span>固原市管网总长度为</span>
        <span class="s-weight">{{pipeLong}}</span>
        <span>km</span>
    </div>
    <div class="gis-content">
        <div id="gis" ref="gis"></div>
        <div class="top-tabs">
            <tools @handleThisDom="thisDom"></tools>
        </div>
        <template v-if="showFireplug=='消防栓'">
            <div class="fireplug">
                <div class="fireplug-tabs">
                    <span :class="{active:fireplug_item==index}" @click="showThisFireplug(index)" v-for="(item,index) in fireplugtabs " :key="index">{{item.name}}</span>
                </div>
                <template v-if="fireplug_item==0">
                    <div class="sub-progress">
                        <div class="tips">保护半径</div>
                        <el-slider v-model="radius" :format-tooltip="formatTooltip"></el-slider>
                        <div class="min-max">
                            <span>50m</span>
                            <span>100m</span>
                        </div>
                    </div>
                </template>
            </div>
        </template>
        <div class="legend" v-if="showLegend">
            <span class='close' @click="closeLegend">
              <i class="el-icon-close"></i>
        </span>
            <div class="pipe-desc">
                <div class="pipe-item">
                    <img src="../../assets/images/pipeNet_manage/msg/pipe_water.png" alt="">
                    <span>输水管线</span>
                </div>
                <div class="pipe-item">
                    <img src="../../assets/images/pipeNet_manage/msg/pipe_gas.png" alt="">
                    <span>燃气管道</span>
                </div>
                <div class="pipe-item">
                    <img src="../../assets/images/pipeNet_manage/msg/pipe_elec.png" alt="">
                    <span>地下高压线</span>
                </div>
            </div>
            <div class="sm-desc">
                <div class="sm-item">
                    <img src="../../assets/images/pipeNet_manage/msg/fm.png" alt="">
                    <span>阀门</span>
                </div>
                <div class="sm-item">
                    <img src="../../assets/images/pipeNet_manage/msg/jxj.png" alt="">
                    <span>检修井</span>
                </div>
                <div class="sm-item">
                    <img src="../../assets/images/pipeNet_manage/msg/xfs.png" alt="">
                    <span>消防栓</span>
                </div>
                <div class="sm-item">
                    <img src="../../assets/images/pipeNet_manage/msg/proj_place.png" alt="">
                    <span>工作点</span>
                </div>
            </div>
        </div>
        <div class="socket">
            <span>说明:管线更新至2018年6月6日</span>
        </div>
        <div class="featureToggle" v-if="tableStatus">
            <div class="tips">
                <i class="el-icon-view"></i>
                <span>查看方式</span>
            </div>
            <div class="select-tabs">
                <!-- <span class="select-item" :class="{active:item.active}" v-for="(item,index) in tabType" :key="index" @click="selectThis(index)">{{item.name}}</span> -->
                <div class="select-item" :class="{actived:selectFlag}" @click="selectThis">年代</div>
                <el-select v-model="areaItem" placeholder="区域">
                    <el-option v-for="item in areaLists" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="productItem" placeholder="材质">
                    <el-option v-for="item in productLists" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="caliberItem" placeholder="管径">
                    <el-option v-for="item in caliberLists" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="search-table">
            <div class="toggle-tab" @click="toggleShow">
                <template v-if="tableStatus">
                    <i class="el-icon-arrow-right"></i>
                </template>
                <template v-else>
                    <i class="el-icon-arrow-left"></i>
                </template>
            </div>
            <div class="time-picker" @mousewheel="scrollSelf" v-if="tableStatus&&timeLine_flag">
                <div class="bolls">
                    <div class="translate-wrap">
                        <div class="inner-wrap">
                            <div class="boll_line"></div>
                            <div class="time-line" v-for="(item,index) in years" :key='index'>
                                <template v-if='index==0'>
                                    <div class="time-ball big"></div>
                                </template>
                                <template v-else>
                                    <div class="time-ball "></div>
                                </template>
                                <div class='years-str' :class="{active:index==activeFlag}" @click="heightLight(index)">{{item}}</div>
                            </div>
                            <div class="last-ball"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrap-table" v-if="tableStatus">
                <div class="wrap-search">
                    <div class="f-item obj">
                        <span class="str">选择对象:</span>
                        <select-tree :waterWorksTree="tree" @showSelectLists="searchObj"></select-tree>
                        <el-button type="primary" style='opacity:0'>搜索</el-button>
                    </div>
                    <div class="f-item positions">
                        <span class="str">管线搜索:</span>
                        <el-input placeholder="请输入内容" v-model="searchValue" clearable>
                        </el-input>
                        <el-button type="primary" @click="searclPipe">搜索</el-button>
                    </div>
                </div>
                <div class="actions">
                    <div class="add" @click="openAddModel">
                        <i class="el-icon-plus"></i>
                        <span>新增</span>
                    </div>
                </div>
                <div class="tabs">
                    <div class="tab-item" @click="activeThis(index)" :class="{active:index==activeTap}" v-for="(item,index) in contentTap" :key="index">{{item.name}}</div>
                    <div class="f-export" @click="showPdfStatus">导出</div>
                </div>
                <div class="tab-content">
                    <div class="content-item  top-head">
                        <div class="head-select">
                            <!-- <span class="tangle"></span> -->
                            <span class="num">序号</span>
                        </div>
                        <div class="own">所属管线</div>
                        <div class="cycle">已用(年限)</div>
                        <div class="action head-action">操作</div>
                    </div>
                    <div class="content-item" v-for="(item,index) in mainPipe" :key="index" v-if="mainPipe.length>0">
                        <div class="head-select">
                            <i class="el-icon-delete" @click="show_delModel(index,item.ID)"></i>
                            <span class="num">{{(index+1)+(currentPage-1)*10}}</span>
                        </div>
                        <div class="own">
                            <span>{{item.PIPELINE_CODE}}</span>
                        </div>
                        <div class="cycle">{{item.USETIME}}</div>
                        <div class="action" @click="showDetail(index,item.PIPELINE_CODE)">详情</div>
                    </div>
                </div>
                <div class="pages">
                    <paginate :totalPage="totalPage" @thisPage="gotoThisPage" :noSmall="'true'"></paginate>
                </div>
            </div>
        </div>
    </div>

    <process-model :showDefinedModel="processToggle" :title="'正在转换'" @hiddenSelf="closedPdfModel">
        <iframe :src="downloadSrc" frameborder="0" style="width:0;height:0;"></iframe>
        <img src="../../assets/images/pipeNet_manage/msg/xfs.png" alt="">
        <div class="process">
            <el-progress :text-inside="true" :stroke-width="18" :percentage="percent"></el-progress>
        </div>
        <div class="status">
            {{processStr}}
        </div>
    </process-model>
    <add-model :showViewModel="showAddModel" :title="title" :wd='"400px"' @hiddenSelf="closeAddModel">
        <div class="main">
            <div class="tabs">
                <div class="tab-item" :class="{actived:index==editOrShow.ModelTab_item}" @click="showThisTab(index)" v-for="(item,index) in editOrShow.ModelTabs" :key="index"> <span>{{item.name}}</span> </div>
            </div>
            <div class="subContent">
                <template v-if="editOrShow.editStatus==true&&editOrShow.ModelTab_item==0">
                    <table>
                        <tr>
                            <td><span>管材</span></td>
                            <td>
                                <el-select v-model="editOrShow.inputs.typeItem" placeholder="请选择">
                                    <el-option v-for="item in editOrShow.pipeType" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td><span>管径</span></td>
                            <td>
                                <el-select v-model="editOrShow.inputs.radus" placeholder="请选择">
                                    <el-option v-for="item in editOrShow.pipeType" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td><span>埋深</span></td>
                            <td><input type="text" placeholder="埋深" v-model="editOrShow.inputs.depth"></td>
                        </tr>
                        <tr>
                            <td><span>管长</span></td>
                            <td><input type="text" placeholder="管长" v-model="editOrShow.inputs.long"></td>
                        </tr>
                        <tr>
                            <td><span>起始高程</span></td>
                            <td><input type="text" placeholder="起始高程" v-model="editOrShow.inputs.startHeight"></td>
                        </tr>
                        <tr>
                            <td><span>终点高程</span></td>
                            <td><input type="text" placeholder="终点高程" v-model="editOrShow.inputs.endHeight"></td>
                        </tr>
                        <tr>
                            <td><span>安装年代</span></td>
                            <td>
                                <el-date-picker v-model="editOrShow.inputs.edit_date" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </td>
                        </tr>
                        <tr>
                            <td><span>使用寿命</span></td>
                            <td><input type="text" placeholder="使用寿命" v-model="editOrShow.inputs.lifeTime"></td>
                        </tr>
                        <tr>
                            <td><span>接口形式</span></td>
                            <td><input type="text" placeholder="接口形式" v-model="editOrShow.inputs.interface"></td>
                        </tr>
                        <tr>
                            <td><span>防腐形式</span></td>
                            <td><input type="text" placeholder="防腐形式" v-model="editOrShow.inputs.embalm"></td>
                        </tr>
                        <tr>
                            <td><span>设计单位</span></td>
                            <td><input type="text" placeholder="设计单位" v-model="editOrShow.inputs.design"></td>
                        </tr>
                        <tr>
                            <td><span>建设单位</span></td>
                            <td><input type="text" placeholder="建设单位" v-model="editOrShow.inputs.deve"></td>
                        </tr>
                        <tr>
                            <td><span>施工单位</span></td>
                            <td><input type="text" placeholder="施工单位" v-model="editOrShow.inputs.build"></td>
                        </tr>
                        <tr>
                            <td><span>监理单位</span></td>
                            <td><input type="text" placeholder="监理单位" v-model="editOrShow.inputs.supervision"></td>
                        </tr>
                    </table>
                </template>
                <template v-if="editOrShow.editStatus==false&&editOrShow.ModelTab_item==0">
                    <table>
                        <tr>
                            <td><span>管材</span></td>
                            <td>
                                <span>管材</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>管径</span></td>
                            <td>
                                <span>管径</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>埋深</span></td>
                            <td><span>埋深</span> </td>
                        </tr>
                        <tr>
                            <td><span>管长</span></td>
                            <td>
                                <span>管长</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>起始高程</span></td>
                            <td>
                                <span>起始高程</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>终点高程</span></td>
                            <td>
                                <span>终点高程</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>安装年代</span></td>
                            <td>
                                <span>安装年代</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>使用寿命</span></td>
                            <td>
                                <span>使用寿命</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>接口形式</span></td>
                            <td>
                                <span>接口形式</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>防腐形式</span></td>
                            <td>
                                <span>防腐形式</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>设计单位</span></td>
                            <td>
                                <span>设计单位</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>建设单位</span></td>
                            <td>
                                <span>建设单位</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>施工单位</span></td>
                            <td>
                                <span>施工单位</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>监理单位</span></td>
                            <td>
                                <span>监理单位</span>
                            </td>
                        </tr>
                    </table>
                </template>
                <template v-if="editOrShow.editStatus==false&&editOrShow.ModelTab_item==1">
                    <div class="timeLine-item" v-for="(item,index) in editOrShow.timeLine" :key="index">
                        <i class="el-icon-arrow-up topLeft"></i>
                        <span>{{item.createdTime}}</span>
                        <img :src="item.imgView" alt="">
                    </div>
                </template>
            </div>
            <template v-if="editOrShow.editStatus==true">
                <div class="fonter">
                    <div class="save">保存</div>
                    <div class="abandon">报废</div>
                    <div class="recovery">恢复</div>
                </div>
            </template>
        </div>
    </add-model>
    <del-model :showModel="showDelModel" :delNum="delId" :type="delType" @delThis="hiddenDelModel"  @sureDelThis="justDel"></del-model>
</div>
</template>

<script>
import * as esriLoader from "esri-loader";
import {
    getPipeBaseInfo
} from "@/api/pipeNet_msg/msg";
import {
    saveOrUpdate
} from "@/api/pipeNet_msg/msg";
import tools from "@/common/components/gis_units/tools";
import selectTree from "@/common/components/selectWithTree";
import paginate from "@/common/components/pagination";
// esriLoader.loadCss(dse.arcgis_themeCss);
esriLoader.loadCss(dse.arcgis_mainCss);
let belowMap = dse.arcgis_belowMap;
let pipeMap = dse.arcgis_pipe;
let ponitsMap = dse.arcgis_points;
let startJs = dse.arcgis_startJS;
let dojoConfig = dse.gisConfig;
const options = {
    url: startJs,
    dojoConfig: dse.gisConfig
};
import processModel from "@/common/components/poupe/defined";
import addModel from "@/common/components/poupe/view";
import delModel from "@/common/components/poupe/save_status";

export default {
    name: "Home",
    components: {
        tools,
        processModel,
        addModel,
        delModel,
        selectTree,
        paginate
    },
    data() {
        return {
            title: "", // 弹窗题目
            view: null, // 全局化  gis底图实例
            map: null, //  挂载底图图层
            layer1: null, // 管网图层
            layer2: null, // 消防栓图层
            layer3: null, // 阀门图层
            distance: null, // 量距离
            drawTools: null, //画基本图
            area: null, // 量面积
            query: "", // 查询图层信息
            pipeLong: "",
            small: false, // 判断当前窗口是否小于 1600
            showLegend: true, // 是否显示图例
            percent: 0, //转换pdf的进度
            dom: "",
            processToggle: false, // 是否显示pdf弹窗
            showFireplug: "",
            processStr: "正在导出，请耐心等待！",
            detailModel: false, //  显示详情的弹窗
            downloadSrc: "",
            search_str: "", // 选择对象的 值
            tree: [],
            contentTap: [{
                name: "供水干管",
                active: true
            }],
            activeTap: 0,
            fireplugtabs: [
                // 消防相关的 tab栏
                {
                    name: "消防分析",
                    active: true
                },
                {
                    name: "消防模拟",
                    active: false
                }
            ],
            fireplug_item: 1,
            radius: 0, //消防分析半径
            tableStatus: true,
            timeLine_flag: false, // 是否显示时间轴的小窗口
            area_flag: false, //  是否显示区域的小窗口
            product_flag: false, //是否显示管材的小窗口
            mainPipe: [],
            caliber_falg: false, // 是否显示管径的小窗口
            searchValue: "", //搜索管线的名字
            activeFlag: 0, // 时间轴的激活状态
            selectFlag: false, // 时间轴是否显示  按钮状态
            selectTime: "", //时间轴的所选年代
            showAddModel: false, // 是否显示新增的弹窗
            showDelModel: false, // 是否显示删除的弹窗
            delType: false, //  显示删除的弹窗
            delList: [], //删除的 列表
            areaLists: [],
            areaItem: "", // 所选区域
            productLists: [],
            productItem: "", // 所选管材
            caliberLists: [],
            caliberItem: "", //所选管径,
            totalPage: 1,
            currentPage: 1,
            editOrShow: {
                editStatus: true,
                ModelTabs: [{
                        name: "基本信息"
                    },
                    {
                        name: "全生命周期"
                    }
                ],
                ModelTab_item: 0,
                pipeType: [{
                        value: "选项1",
                        label: "钢管"
                    },
                    {
                        value: "选项2",
                        label: "胶管"
                    },
                    {
                        value: "选项3",
                        label: "铝管"
                    }
                ],
                edit_date: "", //编辑状态下的日期
                timeLine: [{
                        createdTime: "2014年3月创建",
                        imgView: "http://via.placeholder.com/300x100"
                    },
                    {
                        createdTime: "2014年3月创建",
                        imgView: "http://via.placeholder.com/300x100"
                    },
                    {
                        createdTime: "2014年3月创建",
                        imgView: "http://via.placeholder.com/300x100"
                    }
                ],
                inputs: {
                    typeItem: "",
                    radus: "",
                    depth: "",
                    long: "",
                    startHeight: "",
                    endHeight: "",
                    edit_date: "",
                    lifeTime: "",
                    interface: "",
                    embalm: "",
                    design: "",
                    deve: "",
                    build: "",
                    supervision: ""
                }
            },
            DescList: {
                tabs: [{
                        name: "基本信息"
                    },
                    {
                        name: "全生命周期"
                    },
                    {
                        name: "消防信息"
                    }
                ]
            },
            delIndex:null, //删除的索引
            delId:null, //删除的ID
        };
    },
    methods: {
        createMap() {
            let that = this;
            esriLoader
                .loadModules(
                    [
                        "dojo/on",
                        "esri/Map",
                        "esri/views/MapView",
                        "esri/layers/FeatureLayer",
                        "dse//modules/toolbars/Draw",
                        "dse/modules/measure/_measureDistance",
                        "dse/modules/measure/_measureArea",
                        "dojo/domReady!"
                    ],
                    options
                )
                .then(
                    ([
                        domOn,
                        Map,
                        MapView,
                        FeatureLayer,
                        Draw,
                        _measureDistance,
                        _measureArea
                    ]) => {
                        // Create the map
                        that.map = new Map({
                            basemap: "satellite"
                        });
                        that.layer1 = new FeatureLayer({
                            url: belowMap
                        });
                        that.map.add(that.layer1);

                        let template = {
                            title: "just test",
                            content: "<iframe src='www.baidu.com'>",
                            fieldInfos: []
                        }

                        that.layer2 = new FeatureLayer({
                            url: pipeMap,
                            popupTemplate: template,
                            outFields: ["*"]
                        });
                        that.map.add(that.layer2);
                        that.layer3 = new FeatureLayer({
                            url: ponitsMap,
                            popupTemplate: {
                                title: "阀门",
                                content: "这是阀门的数据"
                            },
                            outFields: ["*"]
                        });
                        that.map.add(that.layer3);
                        that.view = new MapView({
                            container: "gis",
                            map: that.map,
                            zoom: 15,
                            center: [106.290351, 36.001819]
                        });
                        that.drawTools = new Draw({
                            view: that.view
                        });
                        that.distance = new _measureDistance({
                            view: that.view
                        });
                        that.area = new _measureArea({
                            view: that.view
                        });
                        that.view.on("click", function (event) {
                            event.stopPropagation();
                            that.view.hitTest(event).then(
                                res => {
                                    console.log(res);
                                }
                            );
                        });
                    }
                );
        },
        closedPdfModel(flag) {
            this.processToggle = flag;
        },
        searchObj(json) {
            if (json) {
                this.search_str = json.id;
            } else {
                this.search_str = "";
            }
        },
        showPdfStatus() {
            let that = this;
            this.processToggle = true;
            let timer = setInterval(() => {
                if (that.percent >= 100) {
                    that.percent = 100;
                    clearInterval(timer);
                    that.processStr = "转换成功!";
                    this.$store.commit("setAside_status", false);
                    this.$emit("hiddenAside");
                    that.$router.push({
                        name: "pdfView"
                    });
                } else {
                    that.percent += 20;
                }
            }, 1 * 1000);
            let temp_url = that.DSE.pipeMsg_mkpdf;
            setTimeout(() => {
                that.downloadSrc = temp_url + "?name=" + "王宗燕";
            }, 4 * 1100);
        },
        closedDetailModel() {
            this.detailModel = false;
        },
        showDetail() {
            this.detailModel = true;
        },

        toggleShow() {
            this.tableStatus = !this.tableStatus;
        },
        resetStatus(arr) {
            let list = arr;
            if (list.length > 0) {
                list.map(item => {
                    item.active = false;
                });
            }
            return list;
        },
        months() {
            let temp_yearsList = [];
            let oldYear = 1980;
            let time = new Date();
            let nowYear = time.getFullYear();
            let D_year = nowYear - oldYear + 1;
            for (let i = 0; i < D_year; i++) {
                temp_yearsList.push({
                    label: nowYear - i,
                    value: nowYear - i
                });
            }
            return temp_yearsList;
        },
        selectThis(index) {
            let that = this;
            that.selectFlag = !that.selectFlag;
            that.closed();
        },

        scrollSelf(e) {
            let temp_offsetY = e.deltaY;
            let temp_index = this.activeFlag;
            // if(this.years.length==9){
            //   return null;
            // }
            let maxLength = this.years.length;
            if (temp_offsetY <= 0) {
                if (temp_index <= 0) {
                    temp_index = 0;
                    return null;
                } else {
                    temp_index--;
                }
            } else {
                if (temp_index >= maxLength - 1) {
                    temp_index = maxLength;

                    return null;
                } else {
                    temp_index++;
                }
            }
            this.activeFlag = temp_index;
        },
        getThisArea(name, index) {
            this.areaSelect_index = index;
        },
        getThisProduct(name, index) {
            this.productSelect_index = index;
        },
        getThisCaliber(name, index) {
            this.caliberSelect_index = index;
        },
        closed() {
            this.area_flag = false;
            this.product_flag = false;
            this.caliber_falg = false;
            this.timeLine_flag = !this.timeLine_flag;
        },
        heightLight(index) {
            this.activeFlag = index;
            this.selectTime = this.years[index];
        },
        closeLegend() {
            this.showLegend = false;
        },
        activeThis(index) {
            //展示跟导出相关的tab栏
            this.activeTap = index;
        },
        showThisFireplug(index) {
            //展示 消防栓的 tab栏
            this.fireplug_item = index;
        },
        formatTooltip(val) {
            return 50 + 0.5 * val;
        },
        thisDom(obj) {
            console.log(obj);
            let that = this;
            let temp_str = obj.tmpStr;
            switch (temp_str) {
                case "平面":
                    that.view.map.basemap = "streets";
                    break;
                case "卫星":
                    that.view.map.basemap = "satellite";
                    break;
                case "地形":
                    that.view.map.basemap = "terrain";
                    break;
                case "管网":
                    that.map.removeAll();
                    that.map.add(that.layer1);
                    break;
                case "阀门":
                    that.map.removeAll();
                    that.map.add(that.layer2);
                    break;
                case "消防栓":
                    that.map.removeAll();
                    that.map.add(that.layer3);
                    break;
                case "测距":
                    that.distance.start();
                    break;
                case "测面":
                    that.area.start();
                    break;
                case "标点":
                    that.drawTools.activate("circle");
                    break;
                case "标面":
                    that.drawTools.activate("polygon");
                    break;
                case "清除所有":
                    that.distance.clear();
                    that.area.clear();
                    break;
            }
        },
        closeAddModel(flag) {
            this.showAddModel = flag;
        },
        saveInputs(flag) {
            this.showAddModel = flag;
        },
        openAddModel() {
            this.title = "新增";
            this.editOrShow.editStatus = true;
            this.showAddModel = true;
        },
        openDelModel() {
            this.showDelModel = true;
        },
        hiddenDelModel(val) {
            this.showDelModel = val.modelFlag;
        },
        getdata(
            start_year,
            end_year,
            areaId,
            material,
            radius,
            page,
            factoryId,
            pipelineName
        ) {
            let that = this;
            // let temp_name = pipelineName==undefined?"":pipelineName;
            getPipeBaseInfo({
                startYear: "" + start_year,
                endYear: "" + end_year,
                areaId: "" + areaId,
                material: "" + material,
                radius: "" + radius,
                page: "" + page,
                pageSize: "10",
                factoryId: "" + factoryId,
                pipelineName: "" + pipelineName
            }).then(res => {
                let data = res.data;
                if (data) {
                    let {
                        total
                    } = data;
                    if (total) {
                        this.totalPage = Math.ceil(parseInt(total) / 10);
                    }
                    let {
                        rows
                    } = data;
                    if (rows) {
                        that.mainPipe = rows;
                    }
                }
            });
        },
        searclPipe() {
            let json = {};
            let startTime = this.selectTime.split("-")[0];
            let endTime = this.selectTime.split("-")[1];
            let temp_area = this.areaItem;
            let temp_product = this.productItem;
            let temp_caliber = this.caliberItem;
            let temp_compony = this.search_str;
            let temp_searchName = this.searchValue;
            let page = "1";
            this.getdata(
                startTime,
                endTime,
                temp_area,
                temp_product,
                temp_caliber,
                page,
                temp_compony,
                temp_searchName
            );
        },
        showThisTab(index) {
            let that = this;
            if (that.editOrShow.editStatus == false) {
                this.editOrShow.ModelTab_item = index;
            }
        },
        gotoThisPage(val) {
            let temp_index = val + "";
            this.currentPage = temp_index;
            let json = {};
            let startTime = this.selectTime.split("-")[0];
            let endTime = this.selectTime.split("-")[1];
            let temp_area = this.areaItem;
            let temp_product = this.productItem;
            let temp_caliber = this.caliberItem;
            let temp_compony = this.search_str;
            let temp_searchName = this.searchValue;
            let page = "" + temp_index;
            this.getdata(
                startTime,
                endTime,
                temp_area,
                temp_product,
                temp_caliber,
                page,
                temp_compony,
                temp_searchName
            );
        },
        showDetail(index, id) {
            this.editOrShow.editStatus = false;
            this.showAddModel = true;
            this.title = id;
        },
        show_delModel(index,id){
            this.delId = id;
            this.delIndex = index;
            this.showDelModel = true;
        },
        justDel(){
            let temp_delId = this.delId;
            let temp_delIndex = this.delIndex;
            this.configDel(temp_delId,temp_delIndex);
        },
        configDel(id,index){
            let that = this;
            saveOrUpdate({
                "id": ""+id,
	            "status": "3"
            }).then(res=>{
                if(res.status){
                    that.mainPipe.splice(index,1);
                    that.showDelModel = false;
                }
            })
        }
    },

    computed: {
        years() {
            let temp_year = new Date().getFullYear();
            let yearStr = String(temp_year);
            let thisFront_year = yearStr.substring(0, yearStr.length - 1);
            thisFront_year = parseInt(thisFront_year + "0");
            let endYear = 1940;
            let D_year = (thisFront_year - endYear) / 10 + 1;
            let temp_list = [];
            for (let i = 0; i < D_year; i++) {
                temp_list.push(
                    thisFront_year - i * 10 + "-" + (thisFront_year - i * 10 + 9)
                );
            }
            temp_list.push("1940以前");
            return temp_list;
        }
    },

    mounted() {
        let that = this;
        this.selectTime = this.years[0];
        that.createMap();
    },

    created() {
        this.pipeLong = sessionStorage.getItem("pipeLong");
        let time = new Date();
        let temp_year = String(time.getFullYear());
        let temp_years = temp_year.substring(0, temp_year.length - 1);
        temp_years = temp_years + "0";
        let endYear = temp_year;
        this.getdata(temp_years, temp_year, "", "", "", "1", "", "");
        if (document.body.clientWidth < 1600) {
            this.small = true;
        }
        let temp_yearsList = [];
        let oldYear = 1980;
        let nowYear = time.getFullYear();
        let D_year = nowYear - oldYear + 1;
        for (let i = 0; i < D_year; i++) {
            temp_yearsList.push({
                label: nowYear - i,
                value: nowYear - i
            });
        }
        this.productLists = this.DSE.productLists;
        this.caliberLists = this.DSE.caliberLists;
        this.areaLists = this.DSE.areaLists;

        this.tree = this.DSE.tree;
    }
};
</script>

<style lang="scss" scoped>
$base-font: 16px;
$weight: 600;
* {
    box-sizing: border-box; // transition: all 0.5s ease-in-out;
}

#home {
    width: 100%;
    height: 100%;
    font-size: 14px;
    position: relative;
    #defined {
        img {
            display: block;
            margin-bottom: 10px;
        }
        .content>div {
            margin-bottom: 10px;
        }
        .process {
            width: 100%;
            height: 18px;
        }
    }
    .top {
        width: 100%;
        height: 50px;
        line-height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center; // color: #0b65c3;
        background: rgba(0, 0, 0, 0);
        font-weight: 600;
        font-size: 16px;
        color: #fff;
        z-index: 1;
        .s-weight {
            color: #fe2b2b;
        }
    }
    .featureToggle {
        width: 350px;
        position: absolute;
        right: 10px;
        top: 45px;
        background: #fff;
        padding: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        .tips {
            line-height: 20px;
            border-bottom: 1px solid #ccc;
        }
        .select-tabs {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 14px;
            .select-item {
                width: 50px; // margin-right: 10px;
                line-height: 25px;
                padding: 0 10px;
                border-radius: 5px;
                background: #fff;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
                cursor: pointer;
                &.small {
                    font-size: 12px;
                    width: 40px;
                    padding: 0;
                    text-align: center;
                    margin-left: 5px;
                }
                &.actived {
                    background: #cbf3fc;
                }
            }
            .el-select {
                width: 90px;
                &.small {
                    transform: scale(0.8);
                }
            }
        }
    }
    .gis-content {
        width: 100%;
        height: calc(100%);
        position: relative;
        #gis {
            width: 100%;
            height: 100%;
        }
        .top-tabs {
            width: 350px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            top: 10px;
            right: 10px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
            border-radius: 5px;
            z-index: 100;
            &.small {
                width: 260px;
            }
        }
        .fireplug {
            width: 200px;
            position: absolute;
            top: 10px;
            right: 500px;
            .fireplug-tabs {
                height: 25px;
                width: 100%;
                border-radius: 5px;
                background: #fff;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
                line-height: 25px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                span {
                    width: 50%;
                    display: inline-block;
                    text-align: center;
                    cursor: pointer;
                    &:first-child.active {
                        background: blue;
                        color: #fff;
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;
                    }
                    &:last-child.active {
                        background: blue;
                        color: #fff;
                        border-top-right-radius: 5px;
                        border-bottom-right-radius: 5px;
                    }
                }
            }
            .sub-progress {
                // height: 50px;
                width: 100%;
                padding: 10px 15px;
                box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
                font-size: 12px;
                color: #333;
                .min-max {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
        .legend {
            width: 300px;
            height: 150px;
            padding: 10px;
            position: absolute;
            bottom: 50px;
            right: 370px;
            background: #f3f2ed;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
            .close {
                position: absolute;
                right: 3px;
                top: 3px;
                display: inline-block;
                font-size: 12px;
                cursor: pointer;
            }
            .pipe-desc {
                width: 100%;
                height: 80px;
                overflow-y: auto;
                .pipe-item {
                    width: 100%;
                    padding: 5px;
                    height: 25px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 14px;
                    color: #333;
                    img {
                        height: 16px;
                        display: inline-block;
                    }
                }
            }
            .sm-desc {
                width: 100%;
                height: 50px;
                background: #e5e2e2;
                overflow-x: auto;
                display: flex;
                justify-content: center;
                .sm-item {
                    width: 50px;
                    height: 100%;
                    padding: 5px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    img {
                        height: 16px;
                        display: inline-block;
                        margin-bottom: 5px;
                    }
                }
            }
        }
        .socket {
            width: 300px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            bottom: 10px;
            right: 370px;
            background: #f4f3ee;
            font-size: 12px;
            color: #333;
            padding-left: 10px;
            text-align: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        }
        .search-table {
            position: absolute;
            right: 10px;
            top: 120px;
            height: calc(100% - 150px);
            margin-bottom: 20px;
            background: #fff;
            .toggle-tab {
                position: absolute;
                top: 50%;
                left: -12px;
                width: 24px;
                height: 88px;
                border: 1px solid #ccccc8; // border-right: none;
                line-height: 86px;
                cursor: pointer;
                margin-top: -44px;
                margin-left: -12px;
                background: #fff;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                text-align: center;
            }
            .time-picker {
                position: absolute;
                top: 0;
                left: -100px;
                width: 100px;
                height: 65%;
                min-height: 327px;
                border: 1px solid #ccccc8; // background: #2f6ca0;
                background: linear-gradient(to top, #428acf, #3d6e9f, #428acf);
                opacity: 0.8;
                z-index: 100;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                .close {
                    position: absolute;
                    top: 5px;
                    left: 5px;
                    z-index: 99;
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    border: 1px solid #fff;
                    color: #fff;
                    font-size: 12px;
                    text-align: center;
                    cursor: pointer;
                }
                .bolls {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    padding-top: 20px;
                    .translate-wrap {
                        width: 100%;
                        height: calc(100% - 20px);
                        position: relative;
                        overflow-y: hidden;
                        .inner-wrap {
                            width: 100%; // padding: 20px 0;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            position: absolute;
                            top: 0;
                            left: 0; // z-index: -1;
                            .boll_line {
                                position: absolute;
                                top: 10px;
                                bottom: 20px;
                                left: 50%;
                                height: calc(100%);
                                width: 2px;
                                background: #6090c0;
                                z-index: -10;
                                margin-left: -1px;
                            }
                            .time-line {
                                height: 11.11%; // opacity: 0%;
                                position: relative;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                .years-str {
                                    height: 30px;
                                    width: 100%;
                                    cursor: pointer;
                                    text-align: center;
                                    line-height: 30px;
                                    color: #fff;
                                    font-size: 12px;
                                    background: url("../../assets/images/pipeNet_manage/msg/timeLine_mormal.png");
                                    background-repeat: no-repeat;
                                    background-position: center center;
                                    margin-top: 20px;
                                    &.active {
                                        background: url("../../assets/images/pipeNet_manage/msg/timeLine_active.png");
                                        background-repeat: no-repeat;
                                        background-position: center center;
                                    }
                                }
                            }
                            .time-ball {
                                position: absolute;
                                top: 5px;
                                left: 50%;
                                width: 10px;
                                height: 10px;
                                margin-left: -5px; // margin-top: -5px;
                                background: url("../../assets/images/pipeNet_manage/msg/smallBoll.png");
                                background-repeat: no-repeat;
                                background-position: center center;
                                &.big {
                                    background: url("../../assets/images/pipeNet_manage/msg/bigBoll.png");
                                    background-repeat: no-repeat;
                                    background-position: center center;
                                }
                            }
                        }
                    }
                }
                .last-ball {
                    height: 10px;
                    margin-top: 10px;
                    background: url("../../assets/images/pipeNet_manage/msg/bigBoll.png");
                    background-repeat: no-repeat;
                    background-position: center center;
                }
                .yearList {
                    width: 100%;
                    height: 100%;
                    padding: 45% 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .years-item {
                        width: 100%;
                        height: 30px;
                        background: #fff;
                        text-align: center;
                        line-height: 30px;
                    }
                }
            }
            .wrap-table {
                width: 350px;
                height: 100%;
                border: 1px solid #c2c2c2;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
                &.small {
                    width: 260px;
                }
                &.small .select-tabs>span {
                    font-size: 12px;
                    padding: 0 5px !important;
                }
                &.small .f-item {
                    font-size: 12px;
                    .el-select {
                        width: 120px !important;
                        margin-right: 10px;
                    }
                    .el-input {
                        width: 120px !important;
                    }
                    .el-button {
                        font-size: 12px;
                    }
                }
                .wrap-search {
                    width: 100%;
                    margin-bottom: 10px;
                    padding-top: 10px;
                    .tips {
                        width: 100%;
                        height: 25px;
                        border-bottom: 1px solid #ccc;
                        line-height: 25px;
                        padding-left: 10px;
                        font-size: 12px;
                        color: #333;
                    }
                    .f-item {
                        height: 30px;
                        padding: 0 10px;
                        line-height: 30px;
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        span {
                            display: block;
                            width: 100px;
                            line-height: 30px;
                        }
                        #selectTree {
                            width: calc(100% - 110px) !important;
                        }
                        .el-select {
                            width: 200px;
                            margin-right: 10px;
                        }
                        .el-button {
                            height: 30px;
                            line-height: 30px;
                            padding: 0;
                            padding: 0 5px;
                        }
                        &.obj {
                            margin-bottom: 10px;
                        }
                        &.positions {
                            width: 100%;
                            display: flex;
                            justify-content: space-around;
                            .el-input {
                                margin-right: 10px;
                                width: 200px;
                            }
                        }
                    }
                }
                &.small .actions {
                    font-size: 12px !important;
                }
                .actions {
                    width: 100%;
                    height: 40px;
                    background: #ccc;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    &>div {
                        display: inline-block;
                        height: 25px;
                        background: #fff;
                        padding: 0 5px;
                        margin-right: 10px;
                        line-height: 25px;
                        border-radius: 5px;
                        cursor: pointer;
                    }
                }
                &.small .tabs {
                    font-size: 12px !important;
                }
                .tabs {
                    width: 100%;
                    height: 30px;
                    background: #e3ecee;
                    position: relative;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    font-size: 14px;
                    line-height: 30px;
                    color: #333;
                    text-align: center;
                    .tab-item {
                        // padding: 4px 5px;
                        height: 100%; // width: 100px;
                        padding: 0 10px;
                        cursor: pointer;
                        &.active {
                            background: #0b83ff;
                            color: #fbfdfe;
                        }
                    }
                    .f-export {
                        position: absolute;
                        right: 10px;
                        top: 5px;
                        width: 50px;
                        height: 20px;
                        line-height: 20px;
                        background: #3a9a2d;
                        border-radius: 5px;
                        color: #fdfafa;
                        font-size: 12px;
                        cursor: pointer;
                    }
                }
                &.small .tab-content {
                    font-size: 12px;
                }
                .tab-content {
                    padding-top: 10px;
                    height: calc(100% - 210px);
                    padding-bottom: 40px;
                    width: 100%;
                    overflow-y: auto;
                    .content-item {
                        width: 100%;
                        padding: 0 10px;
                        height: 35px;
                        border-bottom: 1px solid #ccc;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        text-align: center;
                        &.top-head {
                            font-weight: $weight;
                        }
                        &:first-child {
                            border-top: 1px solid #ccc;
                        }
                        .head-select {
                            width: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            text-align: center;
                            position: relative;
                            // span {
                            //     display: inline-block;
                            //     width: 12px;
                            //     height: 12px;
                            //     border: 1px solid #ccc;
                            //     margin-right: 5px;
                            //     &.select {
                            //         background: red;
                            //     }
                            // }
                            i{
                                position: absolute;
                                left: -25px;
                                top: 0px;
                                transition: all .5s linear;
                                cursor: pointer;
                            }
                            &:hover{
                                i{
                                    left: 0px;
                                }
                            }
                        }

                        .own {
                            width: 80px;
                            span {
                                display: inline-block;
                                width: 100%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                text-decoration: underline;
                                color: blue;
                                cursor: pointer;
                            }
                        }
                        .cycle {
                            width: 100px;
                        }
                        .action {
                            width: 35px;
                            height: 25px;
                            line-height: 23px;
                            border: 1px solid #0b83ff;
                            text-align: center;
                            border-radius: 5px;
                            color: #0b83ff;
                            cursor: pointer;
                            font-size: 12px;
                        }
                        .head-action {
                            border: none;
                        }
                    }
                }
                &.samll .pages {
                    font-size: 12px;
                }
                .pages {
                    width: 100%;
                    position: absolute;
                    bottom: 10px;
                    left: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 25px;
                    line-height: 25px;
                    .prev,
                    .next {
                        width: 25px;
                        height: 25px;
                        line-height: 23px;
                        border: 1px solid #d2d2d2;
                        text-align: center;
                        cursor: pointer;
                    }
                    .wrap-pages {
                        width: 50px;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        &>div {
                            width: 25px;
                            height: 25px;
                            line-height: 23px;
                            border: 1px solid #d2d2d2;
                            text-align: center;
                            cursor: pointer;
                        }
                    }
                    .redirctPage {
                        line-height: 25px;
                        margin-left: 10px;
                        display: flex;
                        align-items: center;
                        span {
                            font-size: 12px;
                            color: #333;
                            display: inline-block;
                            margin-right: 5px;
                        }
                        input[type="text"] {
                            width: 80px;
                            padding-left: 5px;
                            line-height: 13px;
                            height: 25px;
                            border: 1px solid #d2d2d2;
                            &.error {
                                border: 1px solid red;
                            }
                        }
                    }
                    .totalPage {
                        color: #333;
                        font-size: 12px;
                        line-height: 25px;
                        margin-left: 5px;
                    }
                }
            }
        }
    }
    .viewModel .content .main {
        width: 100%;
        padding-top: 10px;
        .tabs {
            width: 100%;
            padding: 0 10px;
            display: flex;
            justify-content: flex-start;
            margin-bottom: 10px;
            .tab-item {
                height: 25px;
                padding: 0 10px;
                line-height: 25px;
                font-size: 14px;
                color: #333;
                font-weight: 600;
                border: 1px solid #e1e1e3;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                margin-right: 10px;
                cursor: pointer;
                &.actived {
                    background: #0b83fe;
                    color: #fff;
                }
            }
        }
        .subContent {
            width: 100%; // margin-bottom: 10px;
            max-height: 300px;
            padding: 0 10px;
            overflow-y: auto;
            table {
                width: 100%;
                border-spacing: 0;
                text-align: center;
                border: 1px solid #ccc;
                border-bottom: none;
                tr {
                    width: 100%;
                    td {
                        height: 30px;
                        border-bottom: 1px solid #ccc;
                        &:first-child {
                            border-right: 1px solid #ccc;
                            background: #d6fafa;
                        }
                        .el-select,
                        .el-date-editor {
                            width: 80%;
                        }
                        input {
                            display: inline-block;
                            border-radius: 3px;
                            border: 1px solid #ccc;
                            width: 80%;
                            padding-left: 10px;
                        }
                    }
                    &:last-child {
                        td {
                            border-bottom: none;
                        }
                    }
                }
            }
            .timeLine-item {
                width: 100%;
                position: relative;
                border-left: 1px solid #0b83fe;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 0 10px;
                padding-bottom: 10px;
                i {
                    position: absolute;
                    height: 14px;
                    width: 14px;
                    font-size: 14px;
                    display: inline-block;
                    border-radius: 50%;
                    background: #0b83fe;
                    left: -7px;
                    top: 0;
                    color: #fff;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
                }
                span {
                    display: inline-block;
                    margin-bottom: 10px;
                }
                img {
                    display: block;
                    width: 100%;
                }
            }
        }
        .fonter {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            background: #dcdedd;
            height: 50px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            div {
                padding: 0 10px;
                height: 25px;
                line-height: 25px;
                margin-right: 10px;
                border: 1px solid #ccc;
                border-radius: 5px;
                background: #0b83fe;
                color: #fff;
                cursor: pointer;
            }
        }
    }
}
</style>
